<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../css/header.css">
    <link rel="stylesheet" href="../css/footer.css">
    <style>
        body{
            margin: 0;
        }

        #all{
            background-color: #dddddd;/*#8e888a*/
            width: 1180px;
            margin: 0 auto;
            text-align: center;
            padding: 40px 10px;
            position: relative;
            top: 100px;
        }

        #middle_span{
            font-size: 35px;
            text-align: center;
            color: #5675a8;
        }
        #middle_m2{
            margin: 0 auto;
            background-color: #ce93b8;
            width: 495px;
            height: 50px;
            margin: 0 auto;
            position: relative;
            left: 8px;

        }
        #ul1{
            list-style-type: none;
            position: relative;
            right: 730px;
            bottom:4px;
        }
        #ul1 li{
            position:relative;
            float: left;
            margin-left: 45px;
            margin-top: 15px;

        }
        .a1{
            text-decoration: none;
            text-align: center;
            color: black;
        }
        #all  p{
            text-align: center;
            font-size:  20px;
            color: black;
            margin: 0;
        }
        #all_bottom{

        }
        #all img{
            border-radius: 2%;
            border: 3px solid silver;
            width: 220px;
            height: 300px;
            margin-left: 40px;
            margin-top: 20px;
            position: relative;
            left: -12px;
        }
        .last-h2{
            align-content: center;
            color: black;
            font-size: 20px;
            background-color: aquamarine;
        }

        #footer_img{
            width: 1200px;
            height: 216px;
            background-image: url("./picture/捕获.jpg");
            background-size: 100% 90%;
            /*margin: 0 300px 0 280px;*/
            position: relative;
            top: 120px;
            margin: 0 auto;
        }
        #all_bottom img{
            transition-duration: 2s;/*设置动画持续时间*/

        }
        #all_bottom img:hover{
            transform: scale(1.1);/*scale缩放的意思  1.2倍*/

        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.js"></script>
     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>


</head>
<body>
<div id="header">
    <img class="i1" src="../jp/捕获1.PNG" alt="">
    <div id="logo">
        <h1> <a  class="a2"  href="/index.html">A.S Hair Salon
        </a>
            <!--            <a  class="a1" href="">HOME&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">ABOUT&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">PROJECTS&nbsp;&nbsp;&nbsp;</a>-->
            <!--            <a class="a1" href="">CONTACT</a>-->
        </h1>
    </div>
    <div id="login_reg">
        <a  href="#" @click="fn1()">退出</a>
    </div>
</div>
    <div id="all">
<!--        <img src="./picture/x.jpg" id="imgnav">-->
        <div id="middle">
        <h1 id="middle_h">
            <span id="middle_span">作品展示Products
            </span>
        </h1>
            <div id="middle_m2">
            <ul id="ul1">
                <li class="li1"> <a href="" class="a1">全部</a></li>
                <li class="li1"> <a href="" class="a1">短发</a></li>
                <li class="li1"> <a href="" class="a1">长发</a></li>
                <li class="li1"> <a href="" class="a1">烫发</a></li>
                <li class="li1"> <a href="" class="a1">染发</a></li>
            </ul>
            </div>
<!--            list-style-type: none;-->

        </div>
        <div id="all_bottom">
            <img src="./picture/1.jpg" id="i1">
            <img src="./picture/2.jpg">
            <img src="./picture/3.jpg">
            <img src="./picture/4.jpg">
            <img src="./picture/5.jpg" id="i5">
            <img src="./picture/9.jpg">
            <img src="./picture/7.jpg">
            <img src="./picture/8.jpg">
        </div>

        <div id="a_read">
              <a href="" class="a2">首页</a>
              <a href="" class="a2">1</a>
              <a href="" class="a2">2</a>
              <a href="" class="a2">下一页</a>
        </div>

        <div id="last-div">

        <div>
            <h2 class="last-h2">From A.S<br>
                xxxxxxxxxx</h2>
        </div>
        </div>

    </div>

    <div id="footer_img">

    </div>
</div>
<div id="footer">
    <div class="foot_t">
        <div id="zuo_boby">
            <h2 id="ft_title">A.S Hair Salon</h2>
            <p>Lorem Ipsum is simply text the printing and<br>typesetting standard industry.
                Onec Consequat<br> sapien ut cursus rhoncus. Nullam dui mi,<br> vulputate ac metus.
            </p>
            <h3>Trusted by<span style="color: orange">500+ People</span></h3>
            <img src="../jp/微信.webp" alt="" class="tubiao">
            <img src="../jp/qq.webp" alt="" class="tubiao">
        </div>
    </div>
    <div class="foot_t">
        <div id="mid_boby">
            <h4>Quick Links</h4>
            <ul>
                <li><a href="" class="lianjie">>>&nbspHome</a></li>
                <li><a href="" class="lianjie">>>&nbspAbout Us</a></li>
                <li><a href="" class="lianjie">>>&nbspSingle Page</a></li>
                <li><a href="" class="lianjie">>>&nbspTeam</a></li>
                <li><a href="" class="lianjie">>>&nbspContact Us</a></li>
            </ul>
        </div>
    </div>
    <div class="foot_t">
        <div id="you_boby">
            <h4>Contact Info</h4>
            <p id="id1">地址:90 nsequursu dsdesdc, xxx Honey Street 049436.Newyork, NY.</p>
            <p id="id2">电话:+1(12) 123 456 789</p>
            <p id="id3">座机:+1(12) 123 456 789</p>
            <p><a href="" class="lianjie">邮箱:123456789@qq.com</a></p>
        </div>
    </div>
</div>
</div>
</div>
</body>
<script src="../js/header.js"></script>
<script src="hs.js"></script>
</html>